<template>
  <div class="share">
    <div class="t_fm">
      <el-button>默认按钮</el-button>
      <el-upload class="upload-demo" :before-upload="handleChange" :show-file-list="false" multiple
        style="display:inline-block;" action="">
        <el-button type="primary">上传shape文件</el-button>
      </el-upload>
      <el-upload class="upload-demo" :before-upload="handleChange2" :show-file-list="false" multiple
        style="display:inline-block;" action="">
        <el-button type="primary">上传shape文件2</el-button>
      </el-upload>
    </div>
    <el-descriptions class="my-descriptions" border>
      <el-descriptions-item>全民所有草原资源资产清查外业调查表属性结构描述表</el-descriptions-item>
    </el-descriptions>
    <el-descriptions :labelStyle="{ width: '165px' }" border>
      <el-descriptions-item label="样地编号"><el-input v-model="form.YDBH"
          placeholder="请输入内容"></el-input></el-descriptions-item>
      <el-descriptions-item label="行政区名称"><el-input v-model="form.XZQMC"
          placeholder="请输入内容"></el-input></el-descriptions-item>
      <el-descriptions-item label="行政区代码"><el-input v-model="form.XZQDM"
          placeholder="请输入内容"></el-input></el-descriptions-item>
      <el-descriptions-item label="国土调查图斑标识码"><el-input v-model="form.GTDCTBBSM"
          placeholder="请输入内容"></el-input></el-descriptions-item>
      <el-descriptions-item label="国土调查地类编码"><el-input v-model="form.GTDCDLBM"
          placeholder="请输入内容"></el-input></el-descriptions-item>
      <el-descriptions-item label="国土调查地类名称"><el-input v-model="form.GTDCDLMC"
          placeholder="请输入内容"></el-input></el-descriptions-item>
      <el-descriptions-item label="权属单位代码"><el-input v-model="form.QSDWDM"
          placeholder="请输入内容"></el-input></el-descriptions-item>
      <el-descriptions-item label="权属单位名称"><el-input v-model="form.QSDWMC"
          placeholder="请输入内容"></el-input></el-descriptions-item>
      <el-descriptions-item label="草地类"><el-input v-model="form.CDL"
          placeholder="请输入内容"></el-input></el-descriptions-item>
      <el-descriptions-item label="草地型"><el-input v-model="form.CDX"
          placeholder="请输入内容"></el-input></el-descriptions-item>
      <el-descriptions-item label="草原经营单位"><el-input v-model="form.CYJYDW"
          placeholder="请输入内容"></el-input></el-descriptions-item>
      <el-descriptions-item label="子图斑面积"><el-input v-model="form.ZTBMJ"
          placeholder="请输入内容"></el-input></el-descriptions-item>
      <el-descriptions-item label="退化类型"><el-input v-model="form.THLX"
          placeholder="请输入内容"></el-input></el-descriptions-item>
      <el-descriptions-item label="退化程度"><el-input v-model="form.THCD"
          placeholder="请输入内容"></el-input></el-descriptions-item>
      <el-descriptions-item label="退化面积"><el-input v-model="form.THMJ"
          placeholder="请输入内容"></el-input></el-descriptions-item>
      <el-descriptions-item label="利用状况"><el-input v-model="form.LYZK"
          placeholder="请输入内容"></el-input></el-descriptions-item>
      <el-descriptions-item label="利用方式"><el-input v-model="form.LYFS"
          placeholder="请输入内容"></el-input></el-descriptions-item>
      <el-descriptions-item label="样方编号"><el-input v-model="form.YFBH"
          placeholder="请输入内容"></el-input></el-descriptions-item>
      <el-descriptions-item label="样方面积"><el-input v-model="form.YFMJ"
          placeholder="请输入内容"></el-input></el-descriptions-item>
      <el-descriptions-item label="植被盖度"><el-input v-model="form.ZBGD"
          placeholder="请输入内容"></el-input></el-descriptions-item>
      <el-descriptions-item label="平均高"><el-input v-model="form.PJG"
          placeholder="请输入内容"></el-input></el-descriptions-item>
      <el-descriptions-item label="优势种"><el-input v-model="form.YSZ"
          placeholder="请输入内容"></el-input></el-descriptions-item>
      <el-descriptions-item label="产草量鲜重测产 1"><el-input v-model="form.CCLXZY"
          placeholder="请输入内容"></el-input></el-descriptions-item>
      <el-descriptions-item label="产草量鲜重测产 2"><el-input v-model="form.CCLXZE"
          placeholder="请输入内容"></el-input></el-descriptions-item>
      <el-descriptions-item label="产草量鲜重测产 3"><el-input v-model="form.CCLXZS"
          placeholder="请输入内容"></el-input></el-descriptions-item>
      <el-descriptions-item label="产草量鲜重平均值"><el-input v-model="form.CCLXZPJZ"
          placeholder="请输入内容"></el-input></el-descriptions-item>
      <el-descriptions-item label="可食产草量鲜重测产 1"><el-input v-model="form.KSCCLXZY"
          placeholder="请输入内容"></el-input></el-descriptions-item>
      <el-descriptions-item label="可食产草量鲜重测产 2"><el-input v-model="form.KSCCLXZE"
          placeholder="请输入内容"></el-input></el-descriptions-item>
      <el-descriptions-item label="可食产草量鲜重测产 3"><el-input v-model="form.KSCCLXZS"
          placeholder="请输入内容"></el-input></el-descriptions-item>
      <el-descriptions-item label="可食产草量鲜重平均值"><el-input v-model="form.KSCCLXZPJZ"
          placeholder="请输入内容"></el-input></el-descriptions-item>
      <el-descriptions-item label="总产草量鲜重"><el-input v-model="form.ZXZ"
          placeholder="请输入内容"></el-input></el-descriptions-item>
      <el-descriptions-item label="产草量干重测产 1"><el-input v-model="form.CCLGZY"
          placeholder="请输入内容"></el-input></el-descriptions-item>
      <el-descriptions-item label="产草量干重测产 2"><el-input v-model="form.CCLGZE"
          placeholder="请输入内容"></el-input></el-descriptions-item>
      <el-descriptions-item label="产草量干重测产 3"><el-input v-model="form.CCLGZS"
          placeholder="请输入内容"></el-input></el-descriptions-item>
      <el-descriptions-item label="产草量干重平均值"><el-input v-model="form.CCLGZPJZ"
          placeholder="请输入内容"></el-input></el-descriptions-item>
      <el-descriptions-item label="可食产草量干重测产 1"><el-input v-model="form.KSCCLGZY"
          placeholder="请输入内容"></el-input></el-descriptions-item>
      <el-descriptions-item label="可食产草量干重测产 2"><el-input v-model="form.KSCCLGZE"
          placeholder="请输入内容"></el-input></el-descriptions-item>
      <el-descriptions-item label="可食产草量干重测产 3"><el-input v-model="form.KSCCLGZS"
          placeholder="请输入内容"></el-input></el-descriptions-item>
      <el-descriptions-item label="可食产草量干重平均值"><el-input v-model="form.KSCCLGZPJZ"
          placeholder="请输入内容"></el-input></el-descriptions-item>
      <el-descriptions-item label="总产草量干重"><el-input v-model="form.ZGZ"
          placeholder="请输入内容"></el-input></el-descriptions-item>
      <el-descriptions-item label="调查日期">
        <el-date-picker v-model="form.DCRQ" type="date" placeholder="选择日期" value-format="yyyy-MM-dd">
        </el-date-picker>
        <!-- <el-input v-model="form.DCRQ"
          placeholder="请输入内容"></el-input> -->
      </el-descriptions-item>
      <el-descriptions-item label="备注" :span="3"><el-input v-model="form.BZ"
          placeholder="请输入内容"></el-input></el-descriptions-item>
    </el-descriptions>
  </div>
</template>
<script>
import shp from 'shpjs';
export default {
  data() {
    return {
      form: {},
    };
  },
  methods: {
    handleChange(file, fileList) {
      console.log('-------------', file, fileList);
      const uploadedFile = file;
      const reader = new FileReader();
      reader.onload = (event) => {
        console.log(event);
        shp(event.target.result).then((geojson) => {
          console.log(geojson);
          this.form = geojson.features[1].properties;
        }).catch((error) => {
          console.log(error)
        })
      }
      reader.readAsArrayBuffer(uploadedFile);
    },
    handleChange2(file, fileList) {
      console.log('===========', file, fileList);
      const uploadedFile = file;
      const reader = new FileReader();
      reader.onload = (event) => {
        console.log(event);
        shp(event.target.result).then((geojson) => {
          console.log(geojson);
          let array = geojson.features.filter(item => item.properties.GTDCTBBSM == this.form.GTDCTBBSM);
          console.log(array);
          this.form = array[0].properties
        }).catch((error) => {
          console.log(error)
        })
      }
      reader.readAsArrayBuffer(uploadedFile);
    }
  },
  mounted() {
  }
};
</script>
